<template>
	<yd-layout id='courseConsult' class=''>
		<div class="header">
			<img class="header_img" :src="courseObj.title_img" alt="" />
			<div class="header_content">
				<div class="header_title c_text_ellipsis_2">{{courseObj.title}}</div>
				<!--<div class="header_people">{{courseObj.pv}}人听课</div>-->
			</div>
		</div>
		<div class="content">
			<ul class="nav">
				<li @click="navNum=1" :class="navNum==1?'navActive':''">
					<div class="nav_li">课程目录</div>
					<span></span>
				</li>
				<li @click="navNum=2" :class="navNum==2?'navActive':''">
					<div class="nav_li">课程简介</div>
					<span></span>
				</li>
			</ul>
			<yd-infinitescroll v-show="navNum==1&&liveList.length>0" :callback="getLiveList" ref="infinitescrollDemo">

				<div slot="list" class="course_list" v-for="item in liveList" @click="goNext(item)">
					<div class="course_list_title">{{item.title}}</div>
					<div class="course_list_state">
						<div v-if="item.status==1" class="course_list_time">{{item.newTime1}}</div>
						<div v-else class="course_list_time">{{item.newTime2}}</div>

						<div v-if="item.status==0" class="course_list_type" style="color: #FE5742;">直播中</div>
						<div v-else-if="item.status==1" class="course_list_type" style="color: #35BF7E;">预告</div>
						<div v-else class="course_list_type" style="color: #999999;">回放</div>
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>

			<NoList v-if='liveList<=0&&navNum==1'>
				<img slot='img' style="margin-top: 1rem !important;" src="../../assets/byBookrack.png" alt="" />
			</NoList>

			<div v-show="navNum==2" class="c_v_html" v-html="courseObj.summary"></div>
		</div>
		<!--this.courseObj.is_paid != 1&&this.courseObj.price>0-->
		
		<div slot='bottom' v-if="!isMemberFree" class="bottom">
			<div @click="buyCourse" class="bottom_btn">￥{{courseObj.price}}购买课程</div>
		</div>
		
			

		<yd-popup v-model="showPopToast" class='pop_password' position="bottom" width="100%" :close-on-masker='false'>

			<div class="pop_content">

				<div class="pop_top">
					<div class="pop_title">请输入听课密码</div>
					<div class="pop_label">*听课密码请联系领导人获取*</div>

					<div class="pop_input_f">
						<!-- oninput="if(value.length>16)value=value.slice(0,16)"-->
						<input class="pop_input" v-model="passwordNum" type="text" placeholder="输入密码" />
					</div>
				</div>
				<div class="pop_btn">
					<div class="pop_btn_left" @click="showPopToast=false">取消</div>
					<div class="pop_btn_right" @click="postPassword">确定</div>
				</div>
			</div>
		</yd-popup>
		<!--minePop-->
		<!--csFlg-->
		<yd-popup class='pop_money' v-model="minePopFlg" position="bottom" width="100%" :close-on-masker='true'>

			<div class="pop_content_money">
				<img class="pop_close_icon" @click="minePop=false" src="../../assets/audioDetail_8.png" alt="" />
				<div class="pop_moeny_title">亲爱的学员你好</div>
				<div class="pop_money_label">为了更好的服务你听课，请留下你的信息</div>
				<div class="pop_moeny_input_f">
					<input class="pop_money_input" v-model.trim="userForm.relname" type="text" placeholder="请输入你的姓名" />
				</div>
				<div class="pop_moeny_input_f">
					<input oninput="if(value.length>11)value=value.slice(0,11)" class="pop_money_input" v-model.trim.number="userForm.mobile" type="number" pattern="\d*" placeholder="请输入你的电话" />
				</div>
				<div class="pop_moeny_input_f">
					<input class="pop_money_input" v-model.trim="userForm.company" type="text" placeholder="请输入你的公司/系统名称" />
				</div>
				<div class="pop_money_btn" @click="submitForm">提交</div>
			</div>
		</yd-popup>
		<div class="c_go_home c_size_30_42" @click="$router.push({name:'index',query:{str:'index'}})">去首页</div>
	</yd-layout>
</template>

<script>
	var pingpp = require('pingpp-js');
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	export default {
		components: {
			[Popup.name]: Popup,
			[InfiniteScroll.name]: InfiniteScroll,
		},
		data() {
			return {
				csFlg: true,
				navNum: 1,
				showPopToast: false,
				passwordNum: '',
				courseObj: {},
				pageNum: 1,
				pageCount: 10,
				liveList: [],
				mineObj: {},
				minePop: false,
				userForm: {
					relname: '', //姓名
					mobile: '', //手机
					company: '', //公司
				},
				isMemberFree: true, //是否显示价格按钮，false显示，true不显示
				minePopFlg: false,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		async mounted() {
			document.title = '课程详情';
			this.getLiveList();
			await this.getMy();
			this.courseDetail();

		},
		methods: {
			//提交个人信息
			submitForm() {
				if(!this.userForm.relname) {
					this.$dialog.toast({
						mes: '请输入你的姓名',
						timeout: 1500,
					});
					return
				} else {
					if((this.userForm.relname + '').length > 10) {
						this.$dialog.toast({
							mes: '姓名不能超过10个字',
							timeout: 1500,
						});
						return
					}
				}
				if(!this.userForm.mobile) {
					this.$dialog.toast({
						mes: '请输入你的电话',
						timeout: 1500
					});
					return
				} else {
					var phoneReg = /^1[3456789]\d{9}$/;
					if(phoneReg.test(this.userForm.mobile)) {

					} else {
						let msg = '请输入11位手机号码'
						if((this.userForm.mobile + '').length == 11) {
							msg = '输入的手机号格式不对'
						}
						this.$dialog.toast({
							mes: msg,
							timeout: 1500
						});
						return
					}
				}
				if(!this.userForm.company) {
					this.$dialog.toast({
						mes: '请输入你的公司/系统名',
						timeout: 1500,
					});
					return
				} else {
					if((this.userForm.company + '').length > 10) {
						this.$dialog.toast({
							mes: '公司/系统名称不能超过10个字',
							timeout: 1500,
						});
						return
					}
				}

				this.$root.ajax({
					name: 'my/contact',
					params: this.userForm,
				}).then((d) => {
					this.minePop = false;
				})
			},
			//获取个人信息
			getMy() {
				return new Promise((resolve, reject) => {
					this.$root.ajax({
						name: 'my',
						params: {},
					}).then((d) => {
						this.mineObj = d.data
						resolve()
					})
				})

			},
			//购买课程
			async buyCourse() {
				if(this.$root.config.openId) {

				} else {
					await this.$root.getOpenId()
				}
				this.$root.ajax({
					name: 'pay',
					params: {
						oid: this.$route.query.id,
						otype: 50,
						channel: 'wx_pub',
						success_url: this.$root.config.openId,
					},
				}).then((d) => {
					d.data.channel = 'wx_pub'
					pingpp.createPayment(d.data, (result, err) => {
						// object 需是 Charge/Order/Recharge 的 JSON 字符串
						// 可按需使用 alert 方法弹出 log
						//console.log(JSON.stringify(object));
						if(result == "success") {
							window.location.reload();
							// 只有微信JSAPI (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)、支付宝小程序（alipay_lite）支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
						} else if(result == "fail") {
							console.log(err.msg)
							this.$dialog.toast({
								mes: err.msg,
								timeout: 1500
							});
							// Ping++ 对象 object 不正确或者微信JSAPI/微信小程序/QQ公众号支付失败时会在此处返回
						} else if(result == "cancel") {
							this.$dialog.toast({
								mes: '已取消支付！',
								timeout: 1500
							});
							// 微信JSAPI、微信小程序、QQ 公众号、支付宝小程序支付取消支付
						}
					});
				})
			},
			//课程详情
			courseDetail() {
				this.$root.ajax({
					name: 'course',
					params: {
						id: this.$route.query.id
					},
				}).then((d) => {
					if(d.data.is_require_pwd == 0) {
						this.showPopToast = false;
					} else if(d.data.is_input_pwd == 1) {
						this.showPopToast = false;
					} else {
						this.showPopToast = true;
					}

					//已经购买，但是电话号码为空，需要填写
					if(d.data.price > 0 && d.data.is_paid == 1 && (!this.mineObj.mobile)) {
						this.minePop = true
					}
					
					d.data.price = this.$root.setMoneyZero(d.data, 'price')
					this.courseObj = Object.assign({}, this.courseObj, d.data)
					if(this.courseObj.is_paid != 1 && this.courseObj.price > 0){
						this.isMemberFree = false ;
						if(this.courseObj.is_member_free == 1 && this.mineObj.member_status == 1) {
							this.isMemberFree = true ;
						}
					}else{
						this.isMemberFree = true ;
					}

					//分享
					if(this.$root.isWeiXin()) {
						//分享
						let query = '';
						if(this.$root.config.channel) {
							query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${d.data.id}`
						} else {
							query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${d.data.id}`
						}

						this.$root.wxShare({
							d: this.courseObj, //分享对象，题目等{title:'',title_img:''}
							query: query, //参数
							desc: this.courseObj.share_summary //分享详情
						})
					}
				})
			},
			//输入密码
			postPassword() {
				if(!this.passwordNum) {
					this.$dialog.toast({
						mes: '请输入密码',
						timeout: 1500
					});
					return
				}
				this.$root.ajax({
					name: 'course/pwd',
					params: {
						id: this.$route.query.id,
						password: this.passwordNum
					}
				}).then((d) => {
					this.showPopToast = false;
					this.$set(this.courseObj, 'is_input_pwd', 1)
				})
			},
			//课程列表
			getLiveList() {
				this.$root.ajax({
					name: 'live/course/lst',
					params: {
						course_id: this.$route.query.id,
						page: this.pageNum,
						count: this.pageCount,
					},
				}).then((d) => {

					for(let a = 0; a < d.data.live_list.length; a++) {
						d.data.live_list[a].newTime1 = this.$root.getDate(new Date(d.data.live_list[a].start_time * 1000), {
							allTime: true
						})
						d.data.live_list[a].newTime2 = this.$root.getDate(new Date(d.data.live_list[a].begin_time * 1000), {
							allTime: true
						})
					}
					this.liveList = [...this.liveList, ...d.data.live_list];
					if(this.liveList.length >= d.data.live_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;

				})
			},
			goNext(item) {
				//未输入密码
				if(this.courseObj.is_input_pwd != 1 && this.courseObj.is_require_pwd == 1) {
					this.showPopToast = true;
					return
				}
				//未购买
				if(this.courseObj.is_paid != 1 && this.courseObj.price > 0) {
					if(this.courseObj.is_member_free == 1 && this.mineObj.member_status == 1) {
						//未购买会员免费
						this.goHtml(item)
					} else {
						
						//未购买并且不是会员免费
						this.$dialog.confirm({
							title: '温馨提示',
							mes: '该课程购买后才可学习哟~',
							opts: [{
									txt: '知道了',
									color: '#999999',
									callback: () => {

									},
								},
								{
									txt: '去购买',
									color: '#35BF7E',
									callback: () => {
										this.buyCourse()
									}
								},
							]
						});
					}

				} else {
					this.goHtml(item)
				}
				return

			},
			goHtml(item) {
				if(item.status == 1) {
					//预告
					this.$dialog.confirm({
						title: '温馨提示',
						mes: '该场课程尚未开始，先去看看其他课程吧~',
						opts: [{
							txt: '确定',
							color: '#35BF7E',
							callback: () => {

							}
						}]
					});
				} else if(item.status == 2) {
					//回放
					this.$router.push({
						name: 'liveCourse',
						query: {
							id: item.id,
							kind: 2,
							courseId: this.$route.query.id
						}
					})
				} else {
					//直播
					this.$router.push({
						name: 'liveRoomCourse',
						query: {
							id: item.id,
							kind: 2,
							courseId: this.$route.query.id
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './courseClass.scss';
</style>